<!-- 碳账户监测 -->
<template>
  <div class="monitor_container">
    <div class="title"></div>
    <ul class="box">
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">工业</span>
          <span class="li_num">2990</span>
          <span class="li_word">家</span>
        </div>
      </li>
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">交通</span>
          <span class="li_num">45</span>
          <span class="li_word">家</span>
        </div>
      </li>
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">居民</span>
          <span class="li_num">253464</span>
          <span class="li_word">家</span>
        </div>
      </li>
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">农业</span>
          <span class="li_num">253</span>
          <span class="li_word">家</span>
        </div>
      </li>
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">能源</span>
          <span class="li_num">35</span>
          <span class="li_word">家</span>
        </div>
      </li>
      <li>
        <img src="../../../../assets/svg/gongye.svg" alt="" />
        <div class="li_bg">
          <span class="li_title">建筑</span>
          <span class="li_num">45</span>
          <span class="li_word">家</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts"></script>
<style lang="scss" scoped>
.monitor_container {
  display: flex;
  flex-direction: column;
  .title {
    width: 428px;
    height: 66px;
    background: url(../../../../assets/svg/tanzhanghu.svg) no-repeat;
  }
  .box {
    width: 414px;
    margin-left: 19px;
    margin-top: 17px;
    li {
      width: 191px;
      height: 54px;
      float: left;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      line-height: 45px;
      img {
        z-index: 99;
      }
      .li_bg {
        margin-left: -26px;
        width: 165px;
        height: 51px;
        z-index: 0;
        background: linear-gradient(#072767, #041a3d);
        border: 2px solid;
        border-image: linear-gradient(
            90deg,
            rgba(4, 25, 54, 0.73),
            rgba(85, 137, 191, 0.57),
            rgba(4, 25, 54, 0.62)
          )
          2 2;
        .li_title {
          font-size: 20px;
          margin-left: 36px;
          margin-right: 14px;
        }
        .li_num {
          font-size: 16px;
          color: #469de5;
        }
        .li_word {
          font-size: 16px;
          margin-left: 4px;
          color: #d2e0f1;
        }
      }
    }
  }
  .box li:nth-child(odd) {
    margin-right: 32px;
  }
}
</style>
